<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .active {
        color: orange;
    }
</style>

<body>
    <p>菜单1</p>
    <p>菜单2</p>
    <p>菜单3</p>
    <p>菜单4</p>
    <p>菜单5</p>
    <p>菜单6</p>
    <p>菜单7</p>
    <p>菜单8</p>
    <p>菜单9</p>




    <script>
        // es5
        var pDoms = document.querySelectorAll('p');
        for (var i = 0; i < pDoms.length; i++) {
            ; (function (i) {
                pDoms[i].addEventListener('click', function () {
                    for (var a = 0; a < pDoms.length; a++) {
                        pDoms[a].className = ''
                    }
                    pDoms[i].className = 'active'
                    
                })
            })(i)

        }
    </script>

</body>

</html>